<template>
   <div class="orderList-container">
     <van-loading v-if="isShow"  class="loading" size="24px" color="#42bBaa" vertical>加载中...</van-loading>
     <nav-bar>
       <div class="left" slot="left"  @click="goBack()">
         <i class="iconfont icon-fanhui"></i>
       </div>
       <div slot="center">订单列表</div>
     </nav-bar>
     <div class="nav-orderCate">
         <van-tabs v-model="activeName" animated  @change="changeTabs()">
         <van-tab :title="item" :name="index"  v-for="(item,index) in tabs" :key="index">
           <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
           <div class="order-item" v-for="(item,index) in orderList" :key="index" v-show="orderList.length !==0" >
              <div class="order-info" >
                <p>
                  <span class="order-text">订单号：</span>
                  <span class="order-result">{{item.order_no}}</span>
                </p>
                <p>
                  <span class="order-text">状态：</span>
                  <span class="order-result" v-if="item.status === 1">待付款</span>
                  <span class="order-result" v-else-if="item.status === 2">已支付</span>
                  <span class="order-result" v-else-if="item.status === 3">已发货</span>
                  <span class="order-result" v-else-if="item.status === 4">已完成</span>
                  <span class="order-result" v-else>已过期</span>

                </p>
                <p>
                  <span class="order-text">创建时间：</span>
                  <span class="order-result">{{ item.created_at }}</span>
                </p>
                <van-card
                    v-for="(card,index) in item.orderDetails.data"
                    :num="card.num"
                    :key="index"
                    :price="card.goods.price"
                    :desc="card.goods.description"
                    title="商品标题"
                    :thumb="card.goods.cover_url"
                />
              </div>
           </div>
           </van-pull-refresh>
           <div class="empty" v-show="orderList.length===0">
             <div class="empty-container">{{ emptyText }}</div>
           </div>
         </van-tab>
       </van-tabs>
     </div>
   </div>
</template>

<script>
import NavBar from '../../components/nav-bar/Nav-Bar'
import {getOrderList} from "../../api/order/order";
import {Toast} from "vant";
export default {
  name: "OrderList",
  components:{
    NavBar
  },
  data(){
    return{
      tabs:['全部','待付款','已支付','发货','交易完成','过期'],
      activeName:0,
      isLoading: false,
      orderList:[],
      isShow:false,
      emptyText:''
    }
  },
  mounted() {
    this.getOrderListData()
  },
  methods:{
    // 获取订单列表
    async getOrderListData(){
      this.isShow = true
      const res = await getOrderList()
      if(res && res.status === 200){
        this.isShow = false
        this.orderList = res.data.data
        console.log(res);
      }else {
        Toast.fail('订单列表获取失败')
      }

    },
    onRefresh() {
      setTimeout(() => {
        this.getOrderListData()
        Toast('刷新成功');
        this.isLoading = false;
      }, 2000);
    },
    async changeTabs(){
      console.log(this.activeName)
      this.orderList = []
      this.emptyText= ''
      this.isShow = true
      const result = await getOrderList(this.activeName)
      if(result && result.status === 200){
        this.isShow = false
        this.orderList = result.data.data
        if(result.data.data.length === 0){
          this.emptyText = '暂时还没有相关数据哦!'
        }else {
          this.emptyText= ''
        }
      }
      console.log(result);
    },
    // 返回上一级页面
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="css">
.left{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.iconfont{
  font-size: 24px;
}
.nav-orderCate{
  padding-top: 80px;
}
/deep/ .van-tabs__line {

  background-color: #42bBaa;

}
/deep/ .van-tabs__wrap{
  position: fixed;
  top: 45px;
  box-shadow: 5px 5px 5px #eeeeee;
  z-index: 1;
}
.order-info{
  padding: 20px;
}
p{
  text-align: left;
}
.order-text{
  color: #666666;
  font-size: 16px;
}
.order-result{
  font-size: 16px;
}
.empty{
  padding: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #666666;
  /*margin-top: 100px;*/
}
</style>
